<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <script src="js/jquery-2.1.3.min.js" type="text/javascript"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap Core CSS -->
        <script src="js/paho/mqttws31.js" type="text/javascript"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.3.1/lodash.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
        <!-- react begin -->
        <script src="js/react/JSXTransformer.js" type="text/javascript"></script>
        <script src="js/react/react.js" type="text/javascript"></script>
        <!-- react end -->

        <script src="js/paho/encoder.js" type="text/javascript"></script>
        <!--<link href="<?php echo commontools::getResourceWithSiteBase('/content/bower_components/bootstrap/dist/css/bootstrap.min.css') ?>" rel="stylesheet">-->
        <link href="content/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        <!-- MetisMenu CSS -->
        <!--<link href="<?php echo commontools::getResourceWithSiteBase('/content/bower_components/metisMenu/dist/metisMenu.min.css') ?>" rel="stylesheet">-->
        <link href="content/bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet" type="text/css"/>
        <!-- Timeline CSS -->
        <!--<link href="<?php echo commontools::getResourceWithSiteBase('/content/dist/css/timeline.css') ?>" rel="stylesheet">-->
        <link href="content/dist/css/timeline.css" rel="stylesheet" type="text/css"/>
        <!-- Custom CSS -->
        <!--<link href="<?php echo commontools::getResourceWithSiteBase('/content/dist/css/sb-admin-2.css') ?>" rel="stylesheet">-->
        <link href="content/dist/css/sb-admin-2.css" rel="stylesheet" type="text/css"/>
        <!-- Morris Charts CSS -->
        <!--<link href="<?php echo commontools::getResourceWithSiteBase('/content/bower_components/morrisjs/morris.css') ?>" rel="stylesheet">-->
        <link href="content/bower_components/morrisjs/morris.css" rel="stylesheet" type="text/css"/>
        <!-- Custom Fonts -->
        <!--<link href="<?php echo commontools::getResourceWithSiteBase('/content/bower_components/font-awesome/css/font-awesome.min.css') ?>" rel="stylesheet" type="text/css">-->
        <link href="content/bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
        <style type="text/css">
            html,body,.container
            {
                height:100%;

            }
            body{
                display: block;
            }
            .container
            {
                display:block;
                width: 100%;
                margin-top: 0px;
                padding-top: 0px;
                padding-bottom: 0px;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }
            header
            {
                background: green;
                height: 50px;
            }
            footer{
                position: fixed;
                bottom: 0px;
            }
            #chat_second{
                overflow: auto;
            }
            .chat-message{
                padding:5px;
            }
        </style>
    </head>
    <body>
    <div class="container" style="padding-top: 10px;width:100%">
            <div class="row" style="height:100%;margin-left:0px;">
                <div>
                    <div class="panel panel-primary" id="chat_second">

                    </div>
                </div>
            </div>

            <footer>
                <div class="row" style="height:40px;">
                    <div class="input-group">
                        <input id="btn-input" type="text" class="form-control input-sm" placeholder="请输入消息">
                        <span class="input-group-btn">
                            <button class="btn btn-warning btn-sm" id="btn-chat">
                                Send</button>
                        </span>
                    </div>
                </div>
            </footer>
        </div>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
        <script src="js/cells/build/chat.js" type="text/javascript"></script>
        <script src="js/paho/app.js" type="text/javascript"></script>
        <script type="text/javascript">

            $(document).ready(function () {
                websocketclient.afterConnect = function () {
                    websocketclient.subscribe('cx/#', 1, '');
                }

                websocketclient.connect();

                $('#btn-chat').click(function () {
                    console.log(websocketclient.connected);

                    payload = $('#btn-input').val();
                    topic = 'cx/1';
                    qos = 2;
                    retain = false;

                    websocketclient.publish(topic, payload, qos, retain);
                    $('#btn-input').val('');
                });

                // 动态调整会话窗口高度
                function resize()
                {
                    var heights = window.innerHeight;
                    $("#chat_second").css('height',heights-60 + "px");
                }
                resize();
                window.onresize = function() {
                    resize();
                };

                // 给会话窗口绑定自动滚动事件
                $("#chat_second").bind('onAddMessage',function(){
                    this.scrollTop = this.scrollHeight;
                    console.log("called"+this.scrollHeight);
                });

            });

            var instantce = React.render(
                    React.createElement(CommentBox, {data: websocketclient.messages}),
                    document.getElementById('chat_second')
            );


        </script>
    </body>
</html>
